<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
</head>
<link th:href="@{/css/bootstrap11.css}" href="../static/css/bootstrap11.css" rel="stylesheet" type="text/css" >
<link th:href="@{/css/backgron.css}" href="../static/css/backgron.css" rel="stylesheet" type="text/css" >
<link rel="shortcut icon" th:href="@{/img/favicon.ico}" type="image/x-icon" />
<body th:style="'background: url(/img/bgh.jpg) no-repeat fixed;background-size:100%;'"  >

<script>
    function refreshCode() {
        //获取验证码图片对象
        var codeImg = document.getElementById("codeImg");
        //设置其src属性，加时间戳
        codeImg.src = "/userSystem/code?time=" + new Date().getTime();
    }
</script>
<div class="container bn" style="width: 400px;margin-top: 160px">
    <h2 style="text-align: center;margin-bottom: 17px">图书管理系统</h2>
    <form action="/index" method="post">
        <!-- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。-->
        <!-- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" -->
        <div class="input-group">
                          <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
                     viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
              </span>
            <input type="text" name="username" class="form-control " id="username" placeholder="请输入用户名" required oninvalid="setCustomValidity('用户名不能为空');" oninput="setCustomValidity('');"/>
        </div>

        <div class="input-group" style="margin-top: 8px;margin-bottom: 8px">

            <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock"
                     viewBox="0 0 16 16">
  <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
              </span>
            <input type="password" name="password" class="form-control"   id="password" placeholder="请输入密码" required oninvalid="setCustomValidity('密码不能为空');" oninput="setCustomValidity('');"/>

                          <span  style="font-size:11px" id="namespan"></span>
        </div>

        <div class="input-group">
            <span class="input-group-text" style="height: 38px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-emoji-smile" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
                </svg>
            </span>
<!--              //验证码-->
            <input type="text" name="checkCode" class="form-control" id="checkCode" placeholder="验证码" required oninvalid="setCustomValidity('验证码不能为空');" oninput="setCustomValidity('');"/>
            <a onclick="refreshCode()" style="margin: 0px 2px">
                <img alt="验证码" th:src="@{/userSystem/code}" id="codeImg" title="看不清换一张"/>
            </a>
        </div>
        <hr/>
        <div class="form-group" style="text-align: center;width: 100%">
            <input class="btn-primary" type="submit" value="登录" style="width: 100%;height: 35px;font-size: 17px">
        </div>

    </form>

    <!-- 出错显示的信息框 -->
<!--    <c:if th:if="${msg != null && msg != ''}">-->
<!--        <div  style="text-align: center;color: red" class="alert alert-warning alert-dismissible" role="alert">-->
<!--            <button type="button" class="close" data-dismiss="alert">-->
<!--                <span>&times;</span>-->
<!--            </button>-->
<!--            <strong th:text="${msg}"></strong>-->
<!--        </div>-->
<!--    </c:if>-->
</div>
</body>
</html>